﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link rel="stylesheet" href="../../css/mui.plus.css" />
    <link href="../../css/mui.picker.min.css" rel="stylesheet" />
    <link href="../../css/mui.poppicker.css" rel="stylesheet" />
    <style>
    	.mui-grid-view.mui-grid-9 .mui-table-view-cell,.mui-grid-view.mui-grid-9 {
        	border: none;
        } 
        .mui-popover {
        	height: 44px;
        	background-color: transparent;
        	box-shadow: none;
        }
        .mui-popover ul {
        	width: 120px;
        	left: 160px;
        	text-align: left;
        }
        .mui-icon.mui-icon-trash {
        	color: #30B497;
        }
        .pat-scale {
        	color: #30B497 !important;
        }
        .pat-scale.mui-navigate-right:after {
        	content: '\e468';
        	font-size: 30px;
        	color: #30B497;
        	font-weight: bold;
        }
        label>i {
        	color: #EC971F;
        }
        .warning {
        	color: #EC971F;
        }
        .pat-ellipsis {
        	margin-right: 15px!important;
    		max-width: 100px!important;
        }
        .pat-ellipsis>p {
        	font-size: 15px;
        }
        span.pat-status1, span.pat-status2 {
		    padding: 0 3px;
    		margin-left: 5px;
		    border: 1px solid #30b497;
		    border-radius: 5px;
		    font-size: 12px;
		    color: #30B497;
		}
		span.pat-status2 {
			color: #ff924e;
			border: 1px solid #ff924e;
		}
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav pri-bar">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
        <h1 class="mui-title">病历详情</h1>
    </header>
    <footer class="mui-bar mui-bar-footer" style="padding: 0;height: 50px;background-color: #fff;">
        <button type="button" id="btnAdd" class="mui-btn mui-btn-primary mui-btn-block" style="padding:10px 0;">添加术后随访</button>
    </footer>
    
    <div class="mui-content oe-helper oe-interview">
    	<form class="mui-input-group" id="recordList">
    		
    		<div class="mui-input-row">
                <label>姓名<i>*</i></label>
                <input type="text" name="rec_name" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">性别<i>*</i></label>
                <input type="hidden" value="" name="rec_sex" id="hidSex" />
                <button id="showSexBtn" name="rec_sex" type="button" class="mui-btn oe-btn-pick">加载中...</button>
            </div>
            <div class="mui-input-row">
                <label>年龄<i>*</i></label>
                <input type="tel" name="rec_age" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>
            <div class="mui-input-row">
                <label>床号</label>
                <input type="text" name="rec_bed_no" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>
            <div class="mui-input-row">
                <label>住院号</label>
                <input type="text" name="rec_hospital_no" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>
            <div class="mui-input-row">
                <label>联系电话</label>
                <input type="text" name="rec_phone" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>
            <div class="mui-input-row warning">
                <label>过敏史</label>
                <input type="text" name="rec_allergy_his" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>
            <!--<div class="mui-input-row">
                <label>既往史</label>
                <input type="text" name="rec_past_his" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>-->
            <ul class="mui-table-view">
                <li id="btn-past" class="mui-table-view-cell">
                    <a class="mui-navigate-right">
						既往史
						<span class="mui-pull-right pat-ellipsis"><p class="mui-ellipsis">加载中...</p></span>
                    </a>
                </li>
            </ul>
            <div class="mui-input-row">
                <label>诊断</label>
                <input type="text" name="rec_diagnosis" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>
            <div class="mui-input-row">
                <label>手术名称</label>
                <input type="text" name="rec_surgery_name" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">手术时间</label>
                <input type="hidden" name="rec_surgery_date" id="hidTime" value="" />
                <button id="showDateBtn" name="rec_surgery_date" type="button" class="mui-btn oe-btn-pick" data-options='{"type":"date","beginYear":2016,"endYear":2020}'>加载中...</button>
            </div>
            <!--<div class="mui-input-row">
                <label>备忘录</label>
                <input type="text" name="rec_memo" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>-->
    		<ul class="mui-table-view">
                <li id="btn-memo" class="mui-table-view-cell">
                    <a class="mui-navigate-right">
						备忘录
						<span class="mui-pull-right pat-ellipsis"><p class="mui-ellipsis">加载中...</p></span>
                    </a>
                </li>
            </ul>
    	</form>

        <div style="background-color: #fff;padding:15px;">
            <span>添加手术期照片</span>

            <ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: #fff;">
                <li class="mui-table-view-cell mui-media mui-col-xs-4">
                    <a href="###" id="qn1">
                        <div class="mui-media-body">术前</div>
                        <img id="qnImg1" class="oe-img-add"></img>
                        <div id="qnTxt1" class="mui-media-body" style="font-size: 12px;">(已上传0张)</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4">
                    <a href="###" id="qn2">
                        <div class="mui-media-body">术中</div>
                        <img id="qnImg2" class="oe-img-add"></img>
                        <div id="qnTxt2" class="mui-media-body" style="font-size: 12px;">(已上传0张)</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4">
                    <a href="###" id="qn3">
                        <div class="mui-media-body">术后</div>
                        <img id="qnImg3" class="oe-img-add"></img>
                        <div id="qnTxt3" class="mui-media-body" style="font-size: 12px;">(已上传0张)</div>
                    </a>
                </li>
            </ul>

        </div>
        
        <div class="oe-divide-block"></div>
        
        <ul class="mui-table-view">
	        <li id="btn-scale" class="mui-table-view-cell" data-page="../scale/home-rec.html">
	            <a class="mui-navigate-right pat-scale">
					添加量表
	            </a>
	        </li>
	    </ul>
	    
	    <ul id="list-scale" class="mui-table-view">
        </ul>
	    
    </div>
    
    <div id="topPopover" class="mui-popover">
		<div class="mui-popover-arrow"></div>
		<ul class="mui-table-view">
			<li id="btnDelete" class="mui-table-view-cell">
				<a href="#">
					<span class="mui-icon mui-icon-trash"></span>
					<span>删除</span>
				</a>
			</li>
		</ul>
	</div>

    <script src="../../js/mui.min.js"></script>
    <script src="../../js/lib/template.js"></script>
    <script src="../../js/mui.picker.min.js"></script>
    <script src="../../js/mui.poppicker.js"></script>
	<script src="../../js/app.js"></script>
	<script id="tmp-scale" type="text/html">
		{{each scale as v i}}
			<li class="mui-table-view-cell" data-rec = "{{v.rec_id}}">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);" data-rec = "{{v.rec_id}}">删除</a>
				</div>
				<div class="mui-slider-handle" style="transform: translate(0px, 0px);">
					{{if v.rec_type === '2'}}
					<span class="pat-status1">医</span>
					{{else}}
					<span class="pat-status2">患</span>
					{{/if}}
					<span>{{v.rs_name}}</span>
	                <span class="mui-pull-right">{{v.rec_ctime}}</span>
				</div>
	        </li>
		{{/each}}
	</script>
	<script id="record-list" type="text/html">
		{{each data as v i}}
			<div class="mui-input-row">
                <label>姓名<i>*</i></label>
                <input type="text" name="rec_name" placeholder="请填写" style="text-align: right;" value="{{v.rec_name}}">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">性别<i>*</i></label>
                <input type="hidden" value="" name="rec_sex" id="hidSex" />
                <button id="showSexBtn" name="rec_sex" type="button" class="mui-btn oe-btn-pick">{{v.rec_sex}}</button>
            </div>
            <div class="mui-input-row">
                <label>年龄<i>*</i></label>
                <input type="tel" name="rec_age" placeholder="请填写" style="text-align: right;" value="{{v.rec_age}}">
            </div>
            <div class="mui-input-row">
                <label>床号</label>
                <input type="tel" name="rec_bed_no" placeholder="请填写" style="text-align: right;" value="{{v.rec_bed_no}}">
            </div>
            <div class="mui-input-row">
                <label>住院号</label>
                <input type="tel" name="rec_hospital_no" placeholder="请填写" style="text-align: right;" value="{{v.rec_hospital_no}}">
            </div>
             <div class="mui-input-row">
                <label>联系电话</label>
                <input type="text" name="rec_phone" placeholder="请填写" style="text-align: right;" value="{{v.rec_phone}}">
            </div>
            <div class="mui-input-row warning">
                <label>过敏史</label>
                <input type="text" name="rec_allergy_his" placeholder="请填写" style="text-align: right;" value="{{v.rec_allergy_his}}">
            </div>
            <!--<div class="mui-input-row">
                <label>既往史</label>
                <input type="text" name="rec_past_his" placeholder="请填写" style="text-align: right;" value="{{v.rec_past_his}}">
            </div>-->
            <ul class="mui-table-view">
                <li id="btn-past" class="mui-table-view-cell">
                    <a class="mui-navigate-right">
						既往史
						<span class="mui-pull-right pat-ellipsis"><p class="mui-ellipsis">{{v.rec_past_his}}</p></span>
                    </a>
                </li>
            </ul>
            <div class="mui-input-row">
                <label>诊断</label>
                <input type="text" name="rec_diagnosis" placeholder="请填写" style="text-align: right;" value="{{v.rec_diagnosis}}">
            </div>
            <div class="mui-input-row">
                <label>手术名称</label>
                <input type="text" name="rec_surgery_name" placeholder="请填写" style="text-align: right;" value="{{v.rec_surgery_name}}">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">手术时间</label>
                <input type="hidden" name="rec_surgery_date" id="hidTime" value="" />
                <button id="showDateBtn" name="rec_surgery_date" type="button" class="mui-btn oe-btn-pick" data-options='{"type":"date","beginYear":2016,"endYear":2020}'>{{v.rec_surgery_date}}</button>
            </div>
            <ul class="mui-table-view">
                <li id="btn-memo" class="mui-table-view-cell">
                    <a class="mui-navigate-right">
						备忘录
						<span class="mui-pull-right pat-ellipsis"><p class="mui-ellipsis">{{v.rec_surgery_date}}</p></span>
                    </a>
                </li>
            </ul>
        {{/each}}
	</script>
    <script>
        (function ($, doc) {
        	var picList1 = [],  
            	picList2 = [],
            	picList3 = [];
            	
            var picNum 	  = 0,
            	oldPicNum = 0;
            	
            var qn1 = document.getElementById("qn1");
            
            var obj = {}; // 传到下一页的对象
            
            var tempData = {data : []};
            
            var inHos, recId;
            
            $('.mui-content').on('tap', '#btn-past', function(){
            	$.openWindow({
            		url: 'past-his.html',
            		waiting: {
            			autoShow: false
            		},
            		extras: {
            			rec_id: recId
            		}
            	});
            });
            
            $('.mui-content').on('tap', '#btn-memo', function(){
            	$.openWindow({
            		url: 'memo.html',
            		waiting: {
            			autoShow: false
            		},
            		extras: {
            			rec_id: recId
            		}
            	});
            });
            
            $.plusReady(function () {
            	var wv = plus.webview.currentWebview();
            	recId = wv.recId;
            	
            	getScaleListByMedId(recId);
            	
//              var addInterview = $.preload({
//                  "id": 'addInterview',
//                  "url": 'interview-add.html'
//              });
                
                 $('#list-scale').on('tap','li', function(){
	            	var transData = {
	            		sc_rec_id : this.dataset.rec,
	            		rec_id: recId
	            	};
	            	
	            	$.openWindow({
	            		url: '../scale/detail-rec-res.html',
	            		waiting: {
	            			autoShow: false
	            		},
	            		extras: {
	            			transId: transData
	            		}
	            	});
	            });
	            
	            $('#list-scale').on('tap', '.mui-btn-red', function(){
	            	var elem = this;
	            	var rs_rec_id = this.dataset.rec;
					var li = elem.parentNode.parentNode;
					$.confirm('确认删除该条记录？', '骨医快线', ['确认', '取消'], function(e) {
						if (e.index === 0) {
							app.net.post('c_rating_scale_record/delete', {rec_id: rs_rec_id}, function(data){
								if(data && data.code === '100'){
									li.parentNode.removeChild(li);
								}else{
									$.toast('删除失败，请检查您的网络')
								}
							});
						} else {
							setTimeout(function() {
								$.swipeoutClose(li);
							}, 0);
						}
					});
	            })
                
                app.net.get('c_med_record/show', {rec_id: recId}, function(data){
                	var btnAdd = document.getElementById("btnAdd");
                	
					if(data && data.code == 100){
						if(data.data.rec_fo_id !== null){
							btnAdd.innerHTML = '查看随访详情';
						}
	                    
	                    obj = data.data;
	                    inHos = (data.data.rec_status === 'IN_HOS' ? true : false);
	                    tempData.data.push(data.data);
	                    var html = template('record-list', tempData);
	                    document.getElementById("recordList").innerHTML = html;
					}
                });
                
                app.net.get('c_med_record/show_surgery_pic_info_by_rec_id', {rec_id: recId}, function(data){
                    	var res = data.data;
                    	if(data && data.code != 100){
                			document.getElementById("qnTxt3").innerHTML = '(已上传0张)';
			            	document.getElementById("qnImg3").src = '1';
			            	document.getElementById("qnTxt2").innerHTML = '(已上传0张)';
			            	document.getElementById("qnImg2").src = '1';
			            	document.getElementById("qnTxt1").innerHTML = '(已上传0张)';
			            	document.getElementById("qnImg1").src = '1';
			            	return;
                    	}
                    	for(var i = 0; i < res.length; i++){
                    		switch(res[i].spic_stage){
	                    		case 'PRE_OP':
	                				document.getElementById("qnTxt1").innerHTML = '(已上传' + res[i].spic_num + '张)';
						            document.getElementById("qnImg1").src = res[i].spic_src + '?imageView2/1/w/150/h/150';
	                    			break;
	                    		case 'MID_OP':
	                    			document.getElementById("qnTxt2").innerHTML = '(已上传' + res[i].spic_num + '张)';
						            document.getElementById("qnImg2").src = res[i].spic_src + '?imageView2/1/w/150/h/150';
	                    			break;
								case 'POST_OP':
									document.getElementById("qnTxt3").innerHTML = '(已上传' + res[i].spic_num + '张)';
						            document.getElementById("qnImg3").src = res[i].spic_src + '?imageView2/1/w/150/h/150';
									break;
								default:
									break;
                    		}
                    	}
                    });
                    
				$('.mui-content').on('tap', '#btn-scale', function(){
	            	var self = this;
	            	
	            	$.openWindow({
	            		url: this.dataset.page,
	            		waiting: {
	            			autoShow: false
	            		},
	            		extras: {
	            			rec_id: recId
	            		}
	            	});
	            });              
				
				$('.mui-content').on('tap', '#qn1', function(){
					$.openWindow({
						url: 'photo-list.html',
						waiting: {
							autoShow: false
						},
						extras: {
							spic_rec_id: recId, 
							spic_stage: 'PRE_OP'
						}
					});
				})
				
				$('.mui-content').on('tap', '#qn2', function(){
//					$.fire(photoList, 'transPhotoInfo', {spic_rec_id: recId, spic_stage: 'MID_OP'});
					$.openWindow({
						url: 'photo-list.html',
						waiting: {
							autoShow: false
						},
						extras: {
							spic_rec_id: recId, 
							spic_stage: 'MID_OP'
						}
					});
				})
				
				$('.mui-content').on('tap', '#qn3', function(){
//					$.fire(photoList, 'transPhotoInfo', {spic_rec_id: recId, spic_stage: 'POST_OP'});
					$.openWindow({
						url: 'photo-list.html',
						waiting: {
							autoShow: false
						},
						extras: {
							spic_rec_id: recId, 
							spic_stage: 'POST_OP'
						}
					});
				})
				
                $('footer').on('tap', '#btnAdd', function(){
                	if(this.innerHTML === '查看随访详情'){
                		$.openWindow({
                            url: '../interview/detail-home.html',
                            waiting: {
                                autoShow: false
                            },
                            extras:{
                            	pa_id : obj.rec_pa_id,
                				fo_id : obj.rec_fo_id,
                				rec_id : obj.rec_id,
            					fo_stage : obj.fo_stage
                            }
                        });
                	}else if (obj) {
                        $.openWindow({
                            url: 'interview-add.html',
                            waiting: {
                                autoShow: false
                            },
                            extras:{
                            	obj: obj
                            }
                        });
                    }else {
                    	$.toast('网络错误');
                    }
                });
                
                $('#recordList').on('change', 'input', function(){
                	var key = this.name;
                	var value = this.value;
                	var preData = {},transData = {};
                	preData[key] = value;
                	preData.rec_id = recId;
                	transData = preData;
                	app.net.post('c_med_record/update',transData,function(data){
                		if(data && data.code == 100){
                			obj = data.data;
                			plus.nativeUI.toast('更新成功');
                		}
                	},'json');
                	
                });
            
				$('.mui-content').on('tap', '#showDateBtn', function () {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var picker = new $.DtPicker(options);
                    
                    var self = this;
                    picker.show(function (rs) {
                        hidTime.value = rs.text;
                        showDateBtn.textContent = rs.text;
                        
                        var key = self.name;
	                	var value = rs.text;
	                	var preData = {},transData = {};
	                	preData[key] = value;
	                	preData.rec_id = recId;
	                	
	                	app.net.post('c_med_record/update',preData,function(data){
	                		if(data && data.code == 100){
	                			plus.nativeUI.toast('更新成功');
	                		}
	                	},'json');
                        
                        picker.dispose();
                    });
                });   
                
                $('body').on('tap', '.mui-action-back', function(){
                	var all = plus.webview.all();
                	for(var i in all){
                		$.fire(all[i], 'start', null);
                	}
                });
                
                var userPicker = new $.PopPicker();
                
                userPicker.setData([{
                    value: '1',
                    text: '男'
                }, {
                    value: '0',
                    text: '女'
                }]);
                
                $('.mui-content').on('tap', '#showSexBtn', function(){
                	var self = this;
                	
            		userPicker.show(function (items) {
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                        if (items && items.length > 0) {
                            hidSex.value = items[0].text;
                            showSexBtn.textContent = hidSex.value;
                            
                            var key = self.name;
		                	var value = items[0].text;
		                	var preData = {},transData = {};
		                	preData[key] = value;
		                	preData.rec_id = recId;
		                	
		                	app.net.post('c_med_record/update',preData,function(data){
		                		if(data && data.code == 100){
		                			plus.nativeUI.toast('更新成功');
		                		}
		                	},'json');
                            
                        }
                    });
            	});
            	
            	var btnArray = ['确认', '取消'];
				$('body').on('tap', '#btnDelete', function(){
					if(inHos === false){
                		plus.nativeUI.toast('已出院病人无法删除');
                		return;
                	}
					
					$.confirm('确认删除该病历？', '骨医快线', btnArray, function(e) {
						if (e.index == 0) {
							app.net.post('c_med_record/delete', {rec_id : recId}, function(data){
								if(data && data.code == 100){
									plus.nativeUI.toast('删除成功');
									app.bc();
									$.back();
								}
							});
						} else {
							// 取消按钮相关逻辑
						}
					});
				});
            })
            
            var getScaleListByMedId = function(medId){
				app.net.get('c_rating_scale_record/show_list', {med_id: medId}, function(data){
					if(data && data.code === '100'){
						tempData.scale = data.data;
						var html = template('tmp-scale', tempData);
						document.getElementById("list-scale").innerHTML = html;
					}
				});
			}
        }(mui, document));
    </script>
</body>
</html>